<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dom操作</title>
</head>

<body>
    <div>
        <ul>
            <li 父节点 <p>parentNode</p>
            </li>
            <li>
                子节点: childNodes firstNode lastNode
            </li>
            <li>
                同胞节点: nextSibling previousSibling
            </li>
        </ul>
        <div>
            nodeName:标签名
        </div>
        <div>
            createElement()创建节点
            <div>
                添加节点 appendChild() insertBefore()
            </div>
            removeChild()
        </div>

        <div>
            <p>查看元素宽高: offsetWidth, offsetHeight</p>
            <p>查看元素位置: offsetLeft, offsetTop</p>
            <p>
     window.scroll(x,y): 让滚动条滚动的距离
     window.scrollBy() : 滚动距离在基础距离上面相加               
            </p>
        </div>
    </div>
    <script>
        /* 
                Dom (Document Object Model)

                1.document 文档

                2.
        */

        document.write('<ul>');
        for (let i = 0; i < 20; i++) {
            document.write('<li>')
            document.write('<input type="checkbox" name="ids" value="' + i + '" >"aaaaaaaaaaaaa"')
            document.write('</li>')
        }
        document.write('<ul/>');
    </script>
    <a href="javascript:click(1)">全选</a>
    <a href="javascript:click(0)">反选</a>
    <a href="javascript:click(-1)">全不选</a>
</body>

</html>
<!-- <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> -->

<script>
    let cnams = document.getElementsByName("ids");

    console.log(cnams);

    function click(val) {
        for (i in cnams) {
            if (val === 1) {
                cnams[i].checked = true;
            } else if (val === 0) {
                cnams[i].checked = cnams[i].checked ? "" : true;
            } else {
                cnams[i].checked = "";
            }
        }
    }
    document.write("div")
    document.write("</div>")

</script>